<template>
    <el-tabs type="card">
        <el-tab-pane label="完成的订单">
            <el-card class="box-card" v-for="(items, index) in order_info" :key="items.id" :offset="index > 0 ? 2 : 0">
                <div>
                    <div v-for="(i,j) in items.user_info" :key="j" class="user">
                        <el-avatar :src="i.profile_photo" class="img"/>
                                <span>{{ i.nickname }}</span>
                        <button @click="this.$router.push({ name: 'shop_chat', query: { 'user_id': i.id ,'shop_id':this.shop_id,chat_id:i.id+'_'+this.shop_id}})">查看信息</button>
                    </div>
                    <span>订单号:{{ items.order_id }}</span>

                    <el-table :data="items.order_dishes" style="width: 100%">
                        <el-table-column prop="name" label="菜品" width="180" />

                        <el-table-column label="图片">
                            <template #default="scope">
                                <el-image style="width: 100px; height: 100px" :src="scope.row.img" />
                            </template>
                        </el-table-column>

                        <el-table-column prop="price" label="价格" width="180" />
                        <el-table-column prop="num" label="数量" />
                    </el-table>

                    <el-row>
                        <el-col :span="6"><span>总价:{{ items.order_price
                        }}</span> <br> <span>数量:{{ items.order_num }}</span>
                        </el-col>
                        <el-col :span="12"></el-col>
                        <el-col :span="3">

                            <el-button type="primary" plain @click="this.$router.push({ name: 'comment', params: { 'items': items.order_id} })">查看评论</el-button>
                        </el-col>
                        <el-col :span="3">
                        </el-col>
                    </el-row>
                </div>
            </el-card>

        </el-tab-pane>
    </el-tabs>
</template>

<script>
import axios from 'axios'
export default {
    name:'shops_order',
    data(){
        return{
            order_info:[],
            shop_id:this.$route.query.shops_id,
            host:'http://127.0.0.1:8000/',
        }
    },
    mounted(){
        axios.get(this.host + 'shops/order/',
        { headers: { 'token': localStorage.getItem('token') || '' } }).then((resp) => {
            console.log('获取商家所有的完成订单',resp)
            if (resp.data.code==200){
                this.order_info = resp.data.order
            }
        }).catch((err) => {
            console.log(err)            
        });
    }
}
</script>

<style>
.user{
    float: left;
}
.user span{
    margin-left: 20px;
    margin-bottom: 20px;

}
</style>